<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Phaser Sandbox Frame</title>
  <style type="text/css">
    body {
      margin: 0;
      background-color: grey;
    }
  </style>
  <!-- <script src="./js/getQueryString.js"></script>
    <script src="./js/datgui.js"></script> -->
  <!-- <script src="phaser-blockly.js"></script> -->
</head>

<body>
  <div style="width: 100%; text-align: center">
    <div style="display: inline-block;" id="phaser-game"></div>
  </div>
  <script type="text/javascript">
    var _isAlive = false;

    window.onload = function () {
      console.log("iframe");
      _isAlive = true;
      var i = window.top;
      // var phaserVersion = getQueryString("v", "3.15.1", i.location);
      // var phaserScript = document.createElement("script");

      // phaserScript.onload = function() {
      //   i.postMessage("getCode", "*");
      // };

      // phaserScript.type = "text/javascript";
      // phaserScript.src = "./build/" + phaserVersion + ".js";

      // document.head.appendChild(phaserScript);
    };

    window.addEventListener("message", function (event) {
      console.log("iframe received message");
      console.log(event);

      var mainWindow = event.source;

      if (event.data === "ping") {
        mainWindow.postMessage(_isAlive, event.origin);
      } else if (event.data === "reload") {
        //  Otherwise it fires a shutdown event when the page reloads
        console.log("reload");
        window.onbeforeunload = function () { };
        window.location.reload();
        //   console.clear();
        // console.log.apply(console, ['%c                                        >>>', 'background: #ff0000; color: #ffffff']);
      } else {
        try {
          eval(event.data);
        } catch (e) {
          console.warn(e);
        }
      }
    });
  </script>
</body>

</html>